<template>
  <div>
    <el-page-header @back="goBack" content="添加商品" />
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="奥迪" value="aodi"></el-option>
          <el-option label="宝马" value="bmw"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          action="/api/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success='upload'
          :on-error='errorupload'
          :on-remove="handleRemove"
          :limit='1'
          :on-exceed="handleExceed">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="富文本">
        <div class="richtext"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="Reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message, Loading } from 'element-ui'
import E from 'wangeditor'
import { uploaditem } from '_api'

// import _ from 'lodash'
export default {
  data () {
    return {
      form: {
        name: '',
        region: '',
        desc: '',
        url: '',
        context: ''
      },
      dialogVisible: false,
      dialogImageUrl: '',
      editor: '' // 富文本对象
    }
  },
  methods: {
    Reset () {
      const loading = Loading.service(
        {
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        }
      )
      loading.$el.style.zIndex = 999999
      setTimeout(() => {
        loading.close()
      }, 1000)
    },
    handleExceed (files, fileList) {
      Message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 失败的回调
    errorupload  () {
      Message.warning('上传失败')
    },

    // 上传成功发生的回调
    upload (response) {
      if (response.code === 200) {
        this.form.url = response.data.url
      }
    },
    handleRemove  () {
      this.form.url = ''
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onSubmit () {
      this.form.context = this.editor.txt.html()
      if (Object.values(this.form).every(item => item)) {
        // 开始发数据
        const loading = Loading.service(
          {
            lock: true,
            text: '上传中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          }
        )
        loading.$el.style.zIndex = 999999
        // setTimeout(() => {
        //   loading.close()
        // }, 1000)
        setTimeout(() => {
          uploaditem(this.form).then(res => {
            if (res.data.code === 200) {
              loading.close()
              Message.success({
                type: 'success',
                message: '上传成功',
                duration: 1000,
                center: true,
                offset: 100,
                customClass: 'index'
              }).$el.style.zIndex = 999999
            }
          })
        }, 2000)
      } else {
        Message({
          type: 'warning',
          message: '亲填写完整',
          duration: 500,
          center: true,
          offset: 100,
          customClass: 'index'
        }).$el.style.zIndex = 999999
      }
    },
    goBack () {
      this.$router.push('/home/itemlist')
    },
    // 防抖函数
    fd (fn) {
      let time = true
      return function () {
        if (time) {
          clearInterval(time)
        }
        time = setTimeout(() => {
          console.log(1)
        }, 2000)
      }
    }
  },
  mounted () {
    const text = document.querySelector('.richtext')
    this.editor = new E(text)
    this.editor.create()
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-message{
  z-index: 999999999;
}
.w-e-toolbar{
  z-index: 1999;
}
.el-page-header{
  padding: 10px;
  align-items: center;
  line-height: 100%;
  color: white;
  background-color: rgb(221, 213, 215);
  /deep/.el-page-header__content{
    color: white;
  }
}
.el-form{
  width: 77%;
  margin: 40px auto;
}
</style>
